<template>
  <el-form v-model="pageData.queryForm" inline size="small">
    <el-form-item label="搜索">
      <el-input placeholder="团购名称" v-model="pageData.queryForm.groupName"></el-input>
    </el-form-item>
    <el-form-item label="状态">
      <el-select placeholder="请选择" style="width: 100px" v-model="pageData.queryForm.status">
        <el-option value="" label="请选择"></el-option>
        <el-option value="1" label="开启"></el-option>
        <el-option value="0" label="关闭"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="" label-width="0px">
      <el-select
        placeholder="请选择省份"
        style="width: 100px"
        v-model="pageData.queryForm.province"
        @change="changeProvince"
      >
        <el-option
          :value="item.value"
          :label="item.label"
          v-for="item in ProvinceList"
          :key="item.code"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="" label-width="0px">
      <el-select
        style="width: 100px"
        placeholder="请选择市"
        v-model="pageData.queryForm.city"
        @change="changeCity"
      >
        <el-option
          :value="item.value"
          :label="item.label"
          v-for="item in cityList"
          :key="item.code"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="" label-width="0px">
      <el-select style="width: 100px" placeholder="请选择区县" v-model="pageData.queryForm.area">
        <el-option
          :value="item.value"
          :label="item.label"
          v-for="item in areaList"
          :key="item.code"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="团购状态">
      <el-select placeholder="请选择" style="width: 100px" v-model="pageData.queryForm.groupStatus">
        <el-option value="" label="请选择"></el-option>
        <el-option
          v-for="item in groupStatusList"
          :key="item.value"
          :value="item.value"
          :label="item.label"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button @click="querySearch">查询</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="tableData">
    <el-table-column label="序号" type="index" width="60"></el-table-column>
    <el-table-column label="图片" width="100">
      <template #default="scope">
        <img :src="scope.row.img" width="100" height="100" alt="" />
      </template>
    </el-table-column>
    <el-table-column label="楼盘名称" prop="house_name" width="100"></el-table-column>
    <el-table-column label="楼盘地址" prop="address" width="100"></el-table-column>
    <el-table-column label="起止时间" width="350">
      <template #default="scope">
        {{ dayjs(scope.row.start_time).format('YYYY/MM/DD HH:MM:ss') }} -
        {{ dayjs(scope.row.end_time).format('YYYY/MM/DD HH:MM:ss') }}
      </template>
    </el-table-column>
    <el-table-column label="团购状态" width="100">
      <template #default="scope">
        {{
          scope.row.group_status === 0
            ? '未开团'
            : scope.row.group_status === 1
              ? '已开团'
              : scope.row.group_status === 2
                ? '报名中'
                : '已关闭'
        }}
      </template>
    </el-table-column>
    <el-table-column label="状态" width="100">
      <template #default="scope">
        <el-switch v-model="scope.row.switchStatus" @change="changeStatus(scope.row)"></el-switch>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { GET_GROUP, UPDATE_GROUP } from '@/api/group'
import dayjs from 'dayjs'
const groupStatusList = ref()
const getGroupStatus = () => {
  setTimeout(() => {
    groupStatusList.value = [
      {
        value: '0',
        label: '未开团'
      },
      {
        value: '1',
        label: '已开团'
      },
      {
        value: '2',
        label: '报名中'
      },
      {
        value: '3',
        label: '已关闭'
      }
    ]
  }, 1000)
}
getGroupStatus()
const ProvinceList = ref()
const areaList = ref()
const getProvince = () => {
  setTimeout(() => {
    ProvinceList.value = [
      {
        value: '1',
        label: '北京'
      },
      {
        value: '2',
        label: '河南省'
      },
      {
        value: '3',
        label: '广东省'
      },

      {
        value: '4',
        label: '福建省'
      }
    ]
  }, 2000)
}
const cityList = ref()
const getCity = () => {
  const province = pageData.queryForm.province
  setTimeout(() => {
    if (province === '1') {
      cityList.value = [
        {
          value: '1001',
          label: '北京市'
        }
      ]
    } else if (province === '2') {
      cityList.value = [
        {
          value: '2001',
          label: '郑州市'
        },
        {
          value: '2002',
          label: '洛阳市'
        }
      ]
    } else if (province === '3') {
      cityList.value = [
        {
          value: '3001',
          label: '广州市'
        }
      ]
    } else if (province === '4') {
      cityList.value = [
        {
          value: '4001',
          label: '福州市'
        }
      ]
    }
  }, 2000)
}
getProvince()
const changeProvince = () => {
  getCity()
}
const changeCity = () => {
  //获取区县数据并赋值给响应式数据areaList
}
const pageData = reactive({
  queryForm: {
    groupName: '',
    status: '',
    province: '',
    city: '',
    area: '',
    groupStatus: ''
  }
})
const querySearch = () => {
  console.log(pageData.queryForm)
  getData()
}
const tableData = ref()
const getData = () => {
  let params = {
    // grou
    house_name: pageData.queryForm.groupName,
    status: pageData.queryForm.status,
    province: pageData.queryForm.province,
    city: pageData.queryForm.city,
    county: pageData.queryForm.area,
    group_status: pageData.queryForm.groupStatus
  }
  GET_GROUP(params).then((res) => {
    console.log(res)
    tableData.value = res.data.data.map((item: any) => ({
      ...item,
      switchStatus: item.status === 1 ? true : false
    }))
  })
}
getData()
const changeStatus = (data) => {
  UPDATE_GROUP({
    id: data.group_id,
    status: data.switchStatus ? 1 : 0
  }).then((res) => {
    getData()
  })
}
</script>

<style></style>
